<template>
    <div>
        <div class="outer">
            <el-image style="width: 150px; height: 150px" :src="require(`../assets/logo.png`)"></el-image>
            <div class="wenzi">
                进思后台管理系统
            </div>
            <label for="">
                <div class="left"><i class="el-icon-user-solid"></i></div>
                <div class="right"><input type="text" v-model="user_name" class="inputer"></div>
            </label>
            <label for="">
                <div class="left"><i class="el-icon-edit"></i></div>
                <div class="right"><input v-model="passward" class="inputer password"
                        :type='pwdFlag ? "password" : "text"'><i
                        :class="pwdFlag ? 'el-icon-view wihte' : 'el-icon-view black'" @click="changepwdFlag"
                        class="icon"></i></div>
            </label>
            <label for="">
                <div class="left"><i class="el-icon-question"></i></div>
                <div class="right "><input type="text" v-model="messageCode" class="inputer messageCode">
                    <messageCode></messageCode>
                </div>
            </label>
            <div class="botter">
                <el-button type="primary">忘记密码</el-button>
                <el-button type="success">登录</el-button>
            </div>
        </div>
        <bgcanvas class="bgcc"></bgcanvas>
    </div>
</template>

<script>
import bgCanvas from '@/components/bgCanvas.vue';
import messageCode from "../components/MessageCode"
export default {
    data() {
        return {
            user_name: "",
            passward: "",
            messageCode: "",
            pwdFlag: true,//密码标示 true表示当前是密码形式
            textIcon: './images/show.jpg',//展示图标
            pwdIcon: './images/hide.jpg',//隐藏图标
            flag: "password",
            passwardIcon: "el-icon-view wihte"
        }
    },
    methods: {
        changepwdFlag() {
            this.pwdFlag = !this.pwdFlag
        }
    },
    components: {
        "bgcanvas": bgCanvas,
        "messageCode": messageCode
    }
}
</script>

<style lang="less" scoped>
.outer {
    width: 800px;
    height: 600px;
    min-width: auto;
    min-height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 auto;

    position: absolute;
    // /* 水平垂直居中 */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.wenzi {
    font-size: 35px;
    color: white;
    font-weight: 900;
    margin-bottom: 36px;
    margin-top: 36px;
}

label {
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.24);
    width: 614px;
    height: 48px;
    margin-bottom: 36px;
    display: flex;

    .left {
        border-right: 1px solid rgba(255, 255, 255, 0.24);
        height: 48px;
        width: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: aliceblue;
    }

    .inputer {
        outline: none;
        border: 0;
        background-color: rgba(240, 248, 255, 0);
        height: 100%;
        width: 500px;
        font-size: 18px;
        color: aliceblue;
        text-indent: 1em;

    }

    .password {
        width: 500px;
    }

    .el-input__inner {
        outline: none;
        border: 0;
        background-color: rgba(240, 248, 255, 0);
    }
}

.botter {
    width: 767px;
    display: flex;
    justify-content: space-between;
}

.black {
    color: aliceblue;

}

.wihte {
    color: gray;
}

.right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 578px;
}

.messageCode {
    width: 450px !important;
}

.codeimg {
    border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.icon {
    display: block;
    width: 50px;
}
</style>